<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

<div class="container">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#">主页</a></li>
            <li><a href="#">企业列表</a></li>
        </ol>
    </div>

    <div class="row">
        <div class="col-md-12">
            <table class="table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>企业名称</th>
                    <th>所在城市</th>
                    <th>信息来源</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script>
    $(function () {
       $.get("/json/companies",function (result) {
            //遍历JSON格式的公司数组
           if(result){
               $.each(result,function (index,val) {
                   var company = "<tr><td>"+(index+1)+"</td>";
                   company += "<td>"+val.name+"</td>";
                   company += "<td>"+val.city+"</td>";
                   company += "<td>"+val.source+"</td>";
                   company += "<td>"+val.updateTime+"</td>";
                   company +=
                       "<td><a class='btn btn-default' href='#'>修改</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class='btn btn-default' href='#'>删除</a></td></tr>";
                   $("tbody").append(company);
               });
           }
       },"json");
    });
</script>
</body>
</html>